<template>

  <div style="padding: 10px">

    <!--表格区域-->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="merchantId" label="商家ID"/>
      <el-table-column prop="merchantName" label="商家名称"/>
      <el-table-column prop="ownerName" label="归属人"/>
      <el-table-column prop="contactPhone" label="电话"/>
      <el-table-column prop="contactEmail" label="邮箱"/>
      <el-table-column prop="businessLicenseNumber" label="认证编号"/>
      <el-table-column prop="registrationDate" label="注册日期"/>
      <el-table-column prop="storeDescription" label="描述"/>
      <el-table-column prop="isVerified" label="是否认证"/>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="text" @click="handleEdit(scope.row)"
          >编辑
          </el-button
          >
        </template>
      </el-table-column>
    </el-table>





      <!--点击新增，弹出的对话框-->
      <el-dialog
          v-model="dialogVisible"
          title="提示"
          width="30%"
      >
        <el-form :model="form" label-width="120px">
          <el-form-item label="店铺名称">
            <el-input v-model="form.merchantName" style="width: 80%"/>
          </el-form-item>
          <el-form-item label="所属人">
            <el-input v-model="form.ownerName" style="width: 80%"/>
          </el-form-item>
          <el-form-item label="电话">
            <el-input v-model="form.contactPhone" style="width: 80%"/>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="form.contactEmail" style="width: 80%"/>
          </el-form-item>
          <el-form-item label="认证编号">
            <el-input v-model="form.businessLicenseNumber" style="width: 80%"/>
          </el-form-item>
          <el-form-item label="注册日期">
            <el-input v-model="form.registrationDate" style="width: 80%"/>
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="form.storeDescription" style="width: 80%"/>
          </el-form-item>
          <el-form-item label="是否认证">
            <el-input v-model="form.isVerified" style="width: 80%"/>
          </el-form-item>
        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="danger" @click="save">确定</el-button>
      </span>
        </template>
      </el-dialog>
  </div>

</template>

<script>
import request from "@/utils/request";

export default {
  name: 'TraderManager',
  components: {},
  data() {
    return {
      /*前端中的一些变量*/
      form: {},
      dialogVisible: false,
      search: '',
      currentPage: 1,
      total: 10,
      pageSize: 10,
      tableData: [],
    }
  },
  methods: {
    handleEdit(row) {
      /**
       * 进行深拷贝
       * 将row对象的值深拷贝给form表单对象
       * @type {any}
       */
      this.form = JSON.parse(JSON.stringify(row));
      //弹出弹窗
      this.dialogVisible = true;

    },


    handleSizeChange() {
      //改变当前个数触发
      this.load();//重新刷新表格数据

    },
    handleCurrentChange() {
      //改变当前页数触发
      this.load();//重新刷新表格数据
    },


    /*
    新增接口
    * */
    save() {
      if (this.form.merchantId) {
        //如果form对象中有id 则直接更新
        request.put("/trader/updateTraderInfo", this.form).then(res => {
          console.log(res);
          //通过返回结果中的值先进行判断是否更新成功
          //其中res的数据与后端对应
          if (res.code === '0') {
            this.$message({
              type: "success",
              message: "更新成功"
            })
          } else {
            this.$message({
              type: "error",
              //res.msg是打印出成功或则失败的信息
              message: res.msg
            })
          }
          this.load();//刷新页面，重新加载查询
          this.dialogVisible = false;//更新成功后关闭弹窗
        })
      } else {
        //如果没有id则直接新增
        request.post("/user/addUser", this.form).then(res => {
          console.log(res)
          if (res.code === '0') {
            //其中的￥。message是自带的提示，如果更新成功，则提示更新成功
            this.$message({
              type: "success",
              message: "新增成功"
            })
          } else {
            this.$message({
              type: "error",
              message: res.msg
            })
          }
          this.load();//新增成功后直接刷新表格中的数据
          this.dialogVisible = false;//然后关闭弹窗
        })
      }


    },
    /*
    分页查询接口
    * */
    load() {
      request.get("/trader/getTraderInfo", {
        /*其中的请求参数，注意其中的{}这样写
        前面要和后端中接口的参数名一致性，后面要和前端中的参数名一致
        this.  代表的是前端的数据
        * */
        /**
         * 其中params
         * 是get请求中使用的，如果是需要请求参数在get请求中则必需使用这个params
         * 但是如果是在post请求中，
         * 则直接this.form
         */
        params: {
          pageNumber: this.currentPage,
          pageSize: this.pageSize,
          search: this.search
        }

      }).then(res => {
        console.log(res);
        /*将返回得到的res.data.records中的数据复制给前端中的tableData属性
        * 这样即可展示在前端页面*/
        this.tableData = res.data.list;
        this.total = res.data.total;

      })
    },



  },

  /*这个方法是页面以架子啊就执行其中的方法*/
  created() {
    this.load();
  }
}
</script>

<style scoped>
/* 以下是CSS代码 */
.operation-center {
  text-align: center;
}
</style>
